<template>
  <!-- 请假设置 -->
  <el-form ref="leaveFormRef" :model="leaveForm" :rules="leaveRules" label-width="120px">
    <!-- 选择部门 -->
    <el-form-item label="请选择部门：" prop="departmentId">
      <el-cascader
        v-model="leaveForm.departmentId"
        :options="departmentList"
        :props="{ expandTrigger: 'hover', label: 'name', value: 'id', emitPath: false }"
        separator="-"
        @change="onChangeDepartment"
        @blur.native.capture="$refs.leaveFormRef.validateField('departmentId')"
      />
    </el-form-item>
    <!-- 假期类型 -->
    <el-form-item v-if="leaveForm.leaveTypeList.length !== 0" label-width="20px">
      <el-table :data="leaveForm.leaveTypeList" :header-cell-style="{ backgroundColor: '#f8f9fa' }">
        <el-table-column label="类型">
          <template #default="{ row }">
            {{ leaveType[row.leaveType] }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="{ row }">
            <el-switch
              v-model="row.isEnable"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { transListToTreeData } from '@/utils'
import { getLeaveSettingAPI, updateLeaveSettingAPI } from '@/api/attendance'

const defaultFormData = {
  departmentId: 2, // 当前选中的部门id
  leaveTypeList: [] // 假期类型列表
}

export default {
  name: 'LeaveConfig',
  data() {
    return {
      departmentList: [], // 部门列表
      // 请假设置表单数据
      leaveForm: { ...defaultFormData },
      // 请假设置表单校验规则
      leaveRules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: ['blur', 'change'] }
        ]
      },
      leaveType: {
        60000: '年假',
        60100: '事假',
        60200: '病假',
        60300: '婚假',
        60400: '丧假',
        60500: '产假',
        60600: '奖励产假',
        60700: '陪产假',
        60800: '探亲假',
        60900: '工伤假',
        61000: '调休假',
        61100: '产检假',
        61200: '流产假',
        61300: '长期病假',
        61400: '测试假'
      }
    }
  },
  async created() {
    // 获取部门列表
    await this.getDepartmentList()
    await this.onChangeDepartment()
  },
  methods: {
    // 获取部门列表
    async getDepartmentList() {
      const list = await getDepartmentListAPI()
      this.departmentList = transListToTreeData(list, 0)
    },
    // 修改了选中的部门
    async onChangeDepartment() {
      this.leaveForm.leaveTypeList = await getLeaveSettingAPI(this.leaveForm.departmentId)
    },
    // 保存更新
    async saveLeaveSetting() {
      // 校验表单
      this.$refs.leaveFormRef.validate(async valid => {
        if (!valid) return
        // 为leaveForm.leaveTypeList中的每个对象添加name（请假类型名称）字段
        this.leaveForm.leaveTypeList.forEach(item => {
          item.name = this.leaveType[item.leaveType]
        })
        // 发送更新请假设置请求
        await updateLeaveSettingAPI(this.leaveForm.leaveTypeList)
        // 提示保存成功
        this.$message.success('请假设置保存成功')
        // 关闭弹窗
        this.$emit('close')
      })
    },
    // 重置表单数据
    resetFormData() {
      this.leaveForm = { ...defaultFormData }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
